<template lang="pug">
  div.item-container(ref="dom")
</template>

<script>
import echarts from 'echarts'
import tdTheme from '../theme.json'
import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'gongjijin',
  props: {
    gongjijinData: Array,
    mapDataName: String
  },
  data () {
    return {
      dom: null,
      socialSecurityData: null,
      providentFundData: null,
      commercialInsuranceData: null
    }
  },
  watch: {
    gongjijinData: {
      handler (val, oldVal) {
        this.gongjijinData = val
        this.initEcharts()
      },
      deep: true
    }
  },
  computed: {
    value () {
      // let arr = [2386527.38,2285523.06,2530428.07,2436462.74,2520563.92,2620583.79,3000413.28,2860587.21,2650572.38,2540534.27,2665720.22]
      // let _arr = arr.map(_ => {
      //   let num = _/10000
      //   return num.toFixed(4)
      // })
      // return _arr
      let arr = this.gongjijinData.map(_ => {
        return (_.total/10000).toFixed(2)
      })
      return arr
    },
    xAxisData () {
      let arr = this.gongjijinData.map(_ => {
        return _.periodMonth + '月'
      })
      return arr
      // return ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initEcharts()
    })
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    initEcharts () {
      let option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {
            type : 'line'
          },
          formatter: '{b}: {c}万元'
        },
        grid: {
          top: '20%',
          right: '3%',
          left: '5%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          color: '#59588D',
          data: this.xAxisData,
          axisPointer: {
            type: 'line'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(11,175,229,1)'
            }
          },
          axisLabel: {
            margin: 8,
            rotate: 45,
            color: '#fff',
            textStyle: {
              fontSize: 12,
              fontWeight: 100
            }
          },
          splitLine: {
            show: false
            // lineStyle: {
            //   color: '#272456'
            // }
          }
        }],
        yAxis: [{
          // type: "value",
          name: "单位:万元",
          nameTextStyle: {
            color: '#0bafe5',
            fontStyle: 12
          },
          axisLabel: {
            formatter: '{value}',
            color: 'rgba(255,255,255,1)',
          },
          axisLine: {
            // show: false,
            lineStyle: {
              color: '#0bafe5'
            }
          },
          splitLine: {
            // show: false
            lineStyle: {
              color: 'rgba(11,175,229,.15)'
            }
          }
        }],
        series: [{
          type: 'line',
          symbol: 'circle',
          smooth: false,
          data: this.value,
          // borderWidth: '6px',
          itemStyle: {
            color: '#a68a00',
            borderWidth: 20,
            // shadowBlur: 10,
            // shadowColor: '#a68a00',
            // shadowOffsetX: 10,
            // shadowOffsetY: 10
            // normal: {
            //   color: '#a68a00',
            //   borderWidth: 20
            // }
          },
          lineStyle: {
            color: '#a68a00'
          }
        }]
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    }
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
<style lang="less" scoped>
  .item-container{
    height: 100%;
  }
</style>

